<template>
	<div>
		<el-collapse v-model="activeNames" @change="handleChange">
			<el-collapse-item v-for="(Item,index) in ResultList" :key="index">
				<template slot="title" style="font-size: 1.25rem;font-weight: 500;">
					<h4>用户名：{{Item.userName}}</h4>
					<div style="margin-left: 15.5rem;">
						<h4 style="margin-left: 0.625rem;">身份证：{{Item.userNum}}</h4>
					</div>
				</template>
				<ul class="record" >
					<li v-for="(item,index) in Item.abnormalInfoList" :key="index">
						<div>异常行为：{{item.abnormalDescribe}}</div>
						<div>发生时间：{{item.findTime}}</div>
					</li>
				</ul>
			</el-collapse-item>
			

		</el-collapse>
	</div>
</template>

<script>
	import {
		HttpManager
	} from "../../../../../request/Teacher.js"
	export default {
		data() {
			return {
				activeNames: ['1'],
				ResultList:[],
				examId:1
			};
		}
		,
		props: {
			examName:{
				type: String
			}
		},
		watch:{
			examName(newvel){
				console.log(newvel);
				 this.getExamAbnormal();
			}
		},
		created()
		{
		this.getExamAbnormal();
		},
		methods: {
			handleChange(val) {
				console.log(val);
			},
			//获取考场异常行为记录
			getExamAbnormal() {
				var parmas = {
					examId: this.examName
				}
				HttpManager.getExamAbnormal(parmas).then(e => {
					console.log(e);
					this.ResultList = e.data.data;
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.record>li {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
	}


	.el-collapse .icon {
		height: 23px;
		width: 45px;
		line-height: 20px;
		border-radius: 30px;
		background: #d0d5db;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: 15px;
	}

	/* .el-collapse .icon>span {
		display: block;
		border-radius: 50%;
		height: 20px;
		width: 20px;
		border: 4px solid #d0d5db;
		background: white;
		text-align: center;
		line-height: 20px;
	} */
</style>
